<template>
    <div class="subpage edit-nick-name-container">
        <div class="edit-nick-name-top">
            <span>昵称</span>
            <input type="text" placeholder="请输入昵称" maxlength="16" v-model="nickName">
            <van-icon name="close" class="close-icon" v-show="nickName" @click="clearInput" />
        </div>
        <div class="edit-nick-name-bottom">
            <van-button round class="u-btn-default u-bg-gradient-light sure-btn" @click="sureFn">确定</van-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            nickName: ''
        }
    },
    created() {
        this.nickName = this.$route.query.nickName;
    },
    methods: {
        clearInput() {
            this.nickName = '';
        },
        sureFn() {
            if(!this.$tool.validator.isEmpty(this.nickName)){
                this.$tool.toast('请输入昵称')
                return
            }
            if(this.nickName.length > 16){
                this.$tool.toast('昵称最多16个字')
                return
            }
            if(!this.$tool.validator.isSpecialText(this.nickName)){
                this.$tool.toast('昵称中不能包含特殊字符')
                return
            }
            
            this.sureAjax()
        },
        sureAjax() {
            let postData = {
                nickName: this.nickName
            }
            this.$api.post('/api/user/set_nickname', postData)
                .then((res) => {
                    this.$tool.toast('修改成功', 800)
                    setTimeout(() => {
                        this.$router.back()
                    }, 1000)
                })
        }
    }
}
</script>

<style lang="scss" scoped>
    .edit-nick-name-container {
        .edit-nick-name-top {
            width: 100%;
            line-height: 25px;
            padding: 20px 16px;
            box-sizing: border-box;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-content: center;
            span {
                position: relative;
                top: 3px;
                display: block;
                width: 67px;
                color: #5D6164;
                font-size: 16px;
            }
            input {
                padding: 0;
                flex: 1;
                font-size: 16px;
                outline: none;
                border: none;
                background-color: #fff;
            }
            .close-icon {
                position: relative;
                top: 4px;
                color: #D0CFCF;
                font-size: 16px;
                margin-left: 10px;
            }
        }
        .edit-nick-name-bottom {
            width: 100%;
            margin-top: 32px;
            padding: 0 16px;
            box-sizing: border-box;
        }
    }
</style>